<template>
  <!-- 添加检查项 -->
  <a-modal
    :footer="false"
    centered
    :title="headerTitle"
    :visible.sync="dialogVisible"
    @cancel="handleCancel"
    width="1200px"
  >
    <a-row :gutter="10">
      <!-- 侧边栏 -->
      <a-col :span="6" style="border-right: 1px solid #d9d9d9">
        <!-- 公司组织树搜索 -->
        <tree-inspection
          ref="treeInspection"
          isAll
          isDisabled
          @loader="
            checkItemName = ''
            search()
          "
          :selectedKeys.sync="selectedKeys"
          :selectOptions.sync="selectOptions"
        ></tree-inspection>
      </a-col>
      <!-- 主内容 -->
      <a-col :span="18">
        <a-input-search @search="search" v-model="checkItemName" placeholder="请输入检查项名称"></a-input-search>
        <a-row type="flex" justify="space-between" align="middle">
          <!-- 组织等级tabs -->
          <a-col>
            <TabsOrgLevels :id.sync="checkItemLevelId" @switch="handleSwitch" />
          </a-col>
          <a-col>
            <a-button
              :disabled="selectedRowKeys.length === 0"
              type="primary"
              icon="plus"
              @click="handleSubmit(selectedRows)"
              >批量添加</a-button
            >
          </a-col>
        </a-row>
        <!-- 表格 -->
        <s-table
          ref="table"
          :scroll="{ y: 300 }"
          tableLayout="fixed"
          size="default"
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          :rowSelection="rowSelection"
          showPagination="auto"
        >
          <!-- 表格操作栏 -->
          <template
            slot="actions"
            slot-scope="text, record"
          >
            <a v-if="!loadDatas.some((i) => record.id === i.id)" @click="handleSubmit([record])">添加</a>
            <span v-else class="del_btn">已添加</span>
          </template>
        </s-table>
      </a-col>
    </a-row>
  </a-modal>
</template>

<script>
import { STable } from '@/components' // 表格
import TreeInspection from '@/components/businessComponents/TreeInspection' // 树
import TabsOrgLevels from '@/components/businessComponents/TabsOrgLevels' // tabs
export default {
  name: 'a' + Date.now(),
  components: {
    STable,
    TreeInspection,
    TabsOrgLevels
  },
  props: {
    // 显隐控件
    visible: {
      type: Boolean,
      default() {
        return false
      }
    },
    // 操作类型
    editModel: {
      type: [String, Number],
      default() {
        return 0
      }
    },
    // 表单
    form: {
      type: Object,
      default() {
        return {}
      }
    },
    // 标题
    headerTitle: {
      type: String,
      default() {
        return '添加检查项'
      }
    },
    // 列表api
    api: {
      type: Object,
      default() {
        return {}
      }
    },
    // 列表api请求axios
    loadList: {
      type: String,
      default() {
        return 'getList'
      }
    },
    // 添加过的rows
    loadDatas: Array
  },
  computed: {
    // 表格选中项配置
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleChange,
        getCheckboxProps: this.getCheckboxProps
      }
    },
    // 与父组件绑定visible
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (e) {
        this.$emit('update:visible', e)
      }
    },
    // 表格列表请求参数
    args() {
      let args = {
        status: '1',
        mark: true
      }
      // 添加树节点id
      this.selectedKeys.length > 0 && (args.treeId = this.selectedKeys[0])
      // 添加检查项等级
      this.checkItemLevelId && (args.checkItemLevelId = this.checkItemLevelId)
      // 添加检查项等级名称
      this.checkItemName && (args.checkItemName = this.checkItemName)
      return args
    }
  },
  data() {
    return {
      queryParam: {},
      key: '',
      checkItemLevelId: '', // 检查项等级
      checkItemName: '', //检查项名称
      selectedKeys: {},
      loadData: (parameter) => {
        if (this.selectedKeys && this.selectedKeys.length > 0) {
          const requestParameters = Object.assign({}, parameter, this.args)
          return this.api[this.loadList](requestParameters).then((res) => {
            this.selectedRowKeys.length > 0 && this.$refs.table.clearSelected()
            return res
          })
        }
      },
      columns: [
        {
          title: '检查项名称',
          ellipsis: true,
          dataIndex: 'checkItemName'
        },
        {
          title: '判定类型',
          ellipsis: true,
          dataIndex: 'judgmentType'
        },
        {
          title: '最小偏差值',
          dataIndex: 'negativeDeviation'
        },
        {
          title: '标准值',
          dataIndex: 'standardValue'
        },
        {
          title: '最大偏差值',
          dataIndex: 'positiveDeviation'
        },
        {
          title: '操作',
          dataIndex: 'actions',
          width: '100px',
          scopedSlots: { customRender: 'actions' }
        }
      ],
      selectOptions: {},
      selectedRowKeys: [], // 表格选中项键
      selectedRows: [] // 表格选中项值
    }
  },
  methods: {
    /**
     * 表格选中属性
     */
    getCheckboxProps(record) {
      return {
        props: {
          disabled:
            this.loadDatas.some((i) => record.id === i.id),
          name: record.name
        }
      }
    },
    /**
     * 表格选中
     */
    handleChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /**
     * 搜索
     */
    search() {
      // 清空选中项
      this.selectedKeys.length > 0 && this.$refs.table.clearSelected()
      this.$refs.table.refresh(true)
    },
    /**
     * 提交表单
     */
    handleSubmit(record) {
      this.$emit('confirm', this.$clone(record))
    },
    /**
     * 关闭
     */
    handleCancel() {
      this.dialogVisible = false
    },
    /**
     * 切换检查项等级
     */
    handleSwitch() {
      this.$nextTick(() => {
        this.$refs.table.refresh(true)
      })
    }
  },
  watch: {
    visible(e) {
      if (e) {
        if (!this.$refs.treeInspection) {
          this.$nextTick(() => {
            this.$refs.treeInspection.getList().then((res) => {
              this.search()
            })
          })
        } else {
          this.$nextTick(() => {
            this.search()
          })
        }
      }
    }
  }
}
</script>
